<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>p8CSS优先级权重</title>

    <!-- 权重只会叠加，但是永远不会有进位的问题 -->
<style>
    li {
        color: red;
    }

    ul li {
        color: blue;
    }
    /* ul中的li最终颜色为蓝色，因为复合选择器权重叠加：ul0001+li0001=0002>li0001 */

    .nav li {
        color: purple;
    }
    /* ol中的li最终颜色为紫色，因为复合选择器权重叠加：li0001+nav0010=0011>li0001 */
</style>

</head>

<body>
    <!-- 权重大小的相关计算问题：
 继承和通配：0；元素选择器：1；类选择器：10；id选择器：100；行内style=""：1000；!important：无穷大 -->

    <ul>
        <li>什么颜色</li>
        <li>什么颜色</li>
        <li>什么颜色</li>
    </ul>

    <ol class="nav">
        <li>什么颜色</li>
        <li>什么颜色</li>
        <li>什么颜色</li>
    </ol>
</body>

</html>